<template>
  <div>
    <div class="top_1"> 
        <div class="nr" v-for="(item,index) in data[0]" :key="index">
            <!-- 遍历data[0]中的每一项，index为索引 -->
            <img :src="item.img" alt="">
            <!-- 显示图片 -->
            <div class="nr_item">
                <div :style="{color :'#ccc', fonSize:'12px'}">{{ item.floor }}</div>
                <!-- 显示楼层 -->
                <div>设备数量:{{ item.equipmentNum }}</div>
                <!-- 显示设备数量 -->
                <div>
                    正常设备:<b :style="{color:'green'}">{{ item.handclapNum }}</b>
                    <!-- 显示正常设备数量，颜色为绿色 -->
                    <span>
                        故障设备:<b :style="{color:'red'}">{{ item.normalNum }}</b>
                    </span>
                    <!-- 显示故障设备数量，颜色为红色 -->
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script setup>
    import { onMounted, ref } from 'vue'
import { getjiank } from '../../request'
    const data=ref([])
    onMounted(()=>{
        getjiank().then((res)=>{
            data.value=res.data.data.result
        })
    })
</script>

<style >
    .top_1{
        font-size: 16px;
        margin-top: 10px;
        width: 100%;
        height: 260px;
        overflow: auto;
        color: #fff;
        background: #0c1d5f;
        scrollbar-width: none;
    }

    .nr{
        background: #252c6c;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 10px;
    }
    .nr img {
            width: 100px;
            height: 50px;
            margin: 15px;
        }
</style>